<script setup lang="ts">
import type { VbenFormProps } from '@vben/common-ui';

import type { VxeGridProps } from '#/adapter/vxe-table';

import { computed, ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { Image } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { stockChangeList } from '#/api/hm/stockChange';
import { stockHisColumn, stockHisQuerySchema } from '#/views/hm/stock/data';

const stockId = ref<number | string | undefined>('');
const title = computed(() => {
  return '出入库历史记录';
});

const [BasicModal, modalApi] = useVbenModal({
  draggable: true,
  fullscreenButton: false,
  onCancel: handleCancel,
  onConfirm: handleCancel,
  onOpenChange: async (isOpen) => {
    if (!isOpen) {
      return null;
    }
    modalApi.modalLoading(true);
    const { id } = modalApi.getData() as {
      id?: number | string | undefined;
    };
    stockId.value = id;
    modalApi.modalLoading(false);
  },
});

const formOptions: VbenFormProps = {
  commonConfig: {
    labelWidth: 80,
    componentProps: {
      allowClear: true,
    },
  },
  schema: stockHisQuerySchema(),
  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
  // 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
  // 不需要直接删除
  fieldMappingTime: [
    ['pickUpTime', ['startTime', 'endTime'], ['YYYY-MM-DD', 'YYYY-MM-DD']],
  ],
};

const gridOptions: VxeGridProps = {
  checkboxConfig: {
    // 高亮
    highlight: true,
    // 翻页时保留选中状态
    reserve: true,
    // 点击行选中
    // trigger: 'row',
  },
  columns: stockHisColumn,
  height: 'auto',
  keepSource: true,
  pagerConfig: {},
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues = {}) => {
        return await stockChangeList({
          pageNum: page.currentPage,
          pageSize: page.pageSize,
          stockId: stockId.value,
          ...formValues,
        });
      },
    },
  },
  rowConfig: {
    keyField: 'pickUpId',
  },
  // 表格全局唯一表示 保存列配置需要用到
  id: 'hm-saleOrderPickUp-index',
};
const [BasicTable] = useVbenVxeGrid({
  formOptions,
  gridOptions,
});

async function handleCancel() {
  modalApi.close();
}
</script>
<template>
  <BasicModal
    :close-on-click-modal="true"
    :title="title"
    class="h-[800px] w-[1200px]"
  >
    <BasicTable table-title="出入库历史记录" class="h-[640px]">
      <template #url="{ row }">
        <Image :src="row.proof" height="40px" v-if="row.proof" />
      </template>
    </BasicTable>
  </BasicModal>
</template>

<style lang="scss" scoped></style>
